<template>
  <div class="course-container">
    <header>
      <i></i>
      <span>课程管理</span>
    </header>
    <Search ref="Search" />
    <CourseList :courseList="courseList" />
    <Pagination ref="pagenation" />
    <Dialog />
  </div>
</template>
<script>
import Search from "./components/Search.vue";
import CourseList from "./components/CourseList.vue";
import Pagination from "./components/Pagination.vue";
import Dialog from "./components/Dialog.vue";
import {
  getCourseData,
  deleteCourseData,
  updateCourseData,
} from "../../api/course";
export default {
  components: {
    Search,
    CourseList,
    Pagination,
    Dialog,
  },
  data() {
    return {
      courseList: [],
      total: 200,
    };
  },
  computed: {
    search() {
      // console.log(this.$refs.Search.courseID);
      return this.$refs.Search.courseID;
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取数据
    getData() {
      let params = {
        search: this.search,
        page: this.$refs.pagenation.currentPage,
        pageSize: 8,
        startDate: this.$refs.Search.startDate || 0,
        endDate: this.$refs.Search.endDate || Infinity,
        typeList: this.$refs.Search.typeList.join(""),
      };
      getCourseData(params).then((res) => {
        console.log(res);
        this.courseList = res.data.newList;
        this.total = res.data.total;
      });
    },
    // 删除数据
    deleteData(ids) {
      deleteCourseData({ ids: [...ids] }).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.getData();
        }
      });
    },
    // 修改数据
    updateData(item) {
      updateCourseData(item).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.getData();
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.course-container {
  color: #333;
  margin: 0 auto;
  width: 1220px;
  header {
    width: 100%;
    height: 60px;
    i {
      display: inline-block;
      vertical-align: middle;
      width: 5px;
      height: 20px;
      background-color: #438afe;
      margin-right: 14px;
    }
    span {
      vertical-align: middle;
      font-size: 20px;
      line-height: 60px;
    }
  }
}
</style>
